<template>
  <div class="home">
    <div id="map" class="map">

    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { Scene, LineLayer, MaskLayer, Marker } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
import markerData from "@/views/mock/markerData.json";
import Vue from "vue";
import "@/components/marker/markerTemplate.scss";

export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  data() {
    return {
      map: null,
      choseCityCode:null
    };
  },
  mounted() {
    let self = this;
    this.$nextTick(async () => {
      await this.initMap();
    });

    this.$bus.$on("clickCity", (res) => {
      if (self.map.getZoom() >= 8) self.map.zoomOut();
      self.map.setZoomAndCenter(8, [res.lng, res.lat]);
    });
  },
  beforeDestroy() {
    this.$bus.$off("clickCity");
  },
  methods: {
    //初始化地图
    async initMap() {
      this.map = new Scene({
        id: "map",
        logoVisible: false,
        // stencil: true,
        map: new GaodeMap({
          style: "amap://styles/dark",
          pitch: 35.210526315789465,
          center: [113.280637, 23.125178],
          zoom: 6,
          minZoom: 5,
          maxZoom: 10,
          token: this.$store.state.amapKey,
        }),
      });
      //等地图加载完之后再执行
      this.map.on("loaded", async () => {
        await this.addLineLayer();
        await this.addMarkerLayer();
      });
    },
    //添加边界线
    async addLineLayer() {
      let _this = this;
      await this.$curl
        .get("https://geo.datav.aliyun.com/areas_v3/bound/440000.json")
        .then(async (data) => {
          await this.addMaskLayer(data);
          const layer = new LineLayer({
            zIndex: 10,
            mask: true,
          })
            .source(data)
            .size(1)
            .shape("line")
            .style({
              borderColor: "#0DCCFF",
              // borderWidth:1,
            });
          _this.map.addLayer(layer);
        });
    },
    // 给区域以外的区域加上遮罩
    async addMaskLayer(data) {
      let _this = this;
      //定义中国东南西北端点，作为第一层
      var pNW = [-150.0, 140.0];
      var pNE = [356.0, 140.0];
      var pSE = [356.0, -150.0];
      var pSW = [-150.0, -150.0];
      //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
      var pArray = [pNW, pSW, pSE, pNE, pNW];
      let markData = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "MultiPolygon",
              coordinates: [[pArray]],
            },
          },
        ],
      };
      for (const [
        index2,
        coordinate,
      ] of data.features[0].geometry.coordinates.entries()) {
        markData.features[0].geometry.coordinates[0].push(coordinate[0]);
      }
      // console.log(9669, markData);
      const maskLayer = new MaskLayer({}).source(markData).style({
        opacity: 0,
      });
      _this.map.addLayer(maskLayer);
    },
    //添加标记点
    async addMarkerLayer() {
      //纬度从小到大排序，防止弹窗因层级问题被标记点遮盖
      let mData = markerData.sort((a, b) => {
        return a.lat - b.lat;
      });
      for (let [index, item] of mData.entries()) {
        let marker_id = "marker" + item.code;

        const el = document.createElement("div");
        el.innerHTML = `<div id=${marker_id}></div>`;
        const marker = new Marker({
          element: el,
          anchor: "center",
          extData: item,
        }).setLnglat([item.lng * 1, item.lat * 1]);

        let self = this;
        marker.on("click", ({ data }) => {
          if (self.choseCityCode == data.code) {
            if (self.map.getZoom() >= 8) self.map.zoomOut();
            self.map.setZoomAndCenter(8, [data.lng, data.lat]);
            self.choseCityCode = data.code;
            self.$bus.$emit("clickPoint", self.choseCityCode);
          }
        });
        await this.map.addMarker(marker);
        //自定义标记点+弹窗，取代里面的id为marker_xx的div
        let markerTemplate = await import(
          "@/components/marker/markerTemplate.js"
        );
        let _temlaple = await markerTemplate.default(item, index, this);

        let Profile = Vue.extend(_temlaple);
        new Profile().$mount("#" + marker_id);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  z-index: 10;
  #map {
    width: 100%;
    height: 100%;
  }
}
</style>
